<template>
  <el-page-header
    icon=""
    title="项目管理"
    content="项目列表"
  >
  </el-page-header>
  <el-card>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        label="项目名称"
      />
      <el-table-column
        prop="introduction"
        label="项目描述"
      />

      <el-table-column label="更新时间">
        <template #default="scope">
          {{ formatTime.getTime(scope.row.updateTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            circle
            @click="handleEdit(scope.row)"
          >
            <el-icon>
              <Edit></Edit>
            </el-icon>
          </el-button>
          <el-popconfirm
            title="你确定删除该项目吗?"
            confirm-button-text="确定"
            cancel-button-text="取消"
            width="200px"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button
                circle
                type="danger"
              >
                <el-icon>
                  <Delete></Delete>
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import formatTime from "@/utils/formatTime";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const tableData = ref([]);

onMounted(() => {
  getTableList();
});
const getTableList = async () => {
  const res = await axios.get("/adminapi/project/list");
  tableData.value = res.data.data;
};
const handleEdit = (item) => {
  router.push(`/project-manage/projectedit/${item._id}`);
};
const handleDelete = async (item) => {
  const res = await axios.delete(`/adminapi/project/list/${item._id}`);
  if (res.data.ActionType === "OK") {
    ElMessage.success('删除成功')
    getTableList();
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
}

::v-deep .haveImg img {
  max-width: 100%;
}
</style>